<template>
    <a-modal :visible="state.visible" :title="state.formData.storeCode?'删除门店':'新增门店'" @cancel="handleCancel" @ok="handleOk">
        <AForm ref="formRef" :model="state.formData" :labelCol="{ style: 'width:80px' }">
            <AFormItem label="门店名称" name="storeName" :rules="[{required:true}]">
                <AInput v-model:value="state.formData.storeName"></AInput>
            </AFormItem>
            <AFormItem label="门店主图" name="mainImage">
                <UploadImage v-model:value="state.formData.mainImage"></UploadImage>
            </AFormItem>
            <AFormItem label="门店图片" name="detailImage">
                <UploadImage v-model:value="state.formData.detailImages" :maxLength="7"></UploadImage>
            </AFormItem>
            <AFormItem label="门店地址" name="address">
                <AInput v-model:value="state.formData.address"></AInput>
            </AFormItem>
            <AFormItem label="手机号" name="mobile">
                <AInput v-model:value="state.formData.mobile"></AInput>
            </AFormItem>
            <AFormItem label="门店状态" name="storeCode">
                <ASelect v-model:value="state.formData.status">
                    <ASelectOption value="1">营业中</ASelectOption>
                </ASelect>
            </AFormItem>
            <ARow>
                <ACol :span="12">
                    <AFormItem label="经度" name="lat">
                        <AInput v-model:value="state.formData.lng"></AInput>
                    </AFormItem>
                </ACol>
                <ACol :span="12">
                    <AFormItem label="纬度" name="lat">
                        <AInput v-model:value="state.formData.lat"></AInput>
                    </AFormItem>
                </ACol>
            </ARow>
            <AFormItem label="简介" name="lat">
                <AInput v-model:value="state.formData.remark"></AInput>
            </AFormItem>

        </AForm>
    </a-modal>
</template>
<script lang="ts" setup>
import { ResponseVo, StoreTypes } from "../../../type";
import { reactive, ref, onMounted } from "vue";
import UploadImage from "@/components/UploadImage/UploadImage.vue"
import { StoreService } from "@/service";
import { message } from "ant-design-vue";
import DateRangePicker from "@/components/DateRangePicker/index.vue"

const props = withDefaults(defineProps<{
    currentStore?: Partial<StoreTypes.IStoreItem>;
}>(), {
    currentStore: (): Partial<StoreTypes.IStoreItem> => ({})
})

const formRef = ref()
const emit = defineEmits<{
    (e: "ok"): void,
    (e: "cancel"): void
}>()

const state = reactive<{
    formData: Partial<StoreTypes.IStoreItem> & {
        workStartTime:string,
        workEndTime: string,
    };
    visible: boolean
}>({
    formData: {
        workStartTime: "",
        workEndTime: ""
    },
    visible: true
})

onMounted(() => {
    state.formData = { ...props.currentStore } as any;
})

const handleOk = () => {
    formRef.value.validateFields().then(async (valid: boolean) => {
        if (valid) {
            let res: ResponseVo<any>
            if (state.formData.storeCode) {
                res = await StoreService.editStore(state.formData as StoreTypes.IStoreItem);
            } else {
                res = await StoreService.addStore(state.formData as StoreTypes.IStoreItem);
            }
            if (res.code === 0) {
                message.success("操作成功！")
                emit("ok");
            }
        }
    })
}

const handleCancel = () => {
    emit("cancel")
}
</script>